import VueRouter from 'vue-router'
import Home from '../pages/home.vue'
import About from '../pages/about.vue'
import Vue from 'vue'

Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/useMouse',
    name: 'useMouse',
    component: () => import('../pages/useMouse.vue'),
  },
  {
    path: '/useCount',
    name: 'useCount',
    component: () => import('../pages/useCount.vue'),

  },
  {
    path: '/useMouseInElement',
    name: 'useMouseInElement',
    component: () => import('../pages/useMouseInElement.vue'),
  },
  {
    path: '/IntersectionObserver',
    name: 'IntersectionObserver',
    component: () => import('../pages/IntersectionObserver.vue'),
  },
  {
    path: '/onClickOutside',
    name: 'onClickOutside',
    component: () => import('../pages/onClickOutside.vue'),
  },
  {
    path: '/useRefHistory',
    name: 'useRefHistory',
    component: () => import('../pages/useRefHistory.vue'),
  },
  {
    path: '/useTransition',
    name: 'useTransition',
    component: () => import('../pages/useTransition.vue'),
  },
  {
    path: '/useVModel',
    name: 'useVModel',
    component: () => import('../pages/useVModel.vue'),
  },
  {
    path: '/useVModelChild',
    name: 'useVModelChild',
    component: () => import('../pages/useVModelChild.vue'),
  }
]

const router = new VueRouter({
  routes,
  mode: "history"
})

export default router
